<template>
  <div
    :style="{
      textAlign: computedState.position as CSSProperties['textAlign'],
    }"
  >
    <MaterialsHeader
      :serial-num="serialNum"
      :title="computedState.title"
      :desc="computedState.desc"
      :title-size="computedState.titleSize"
      :title-weight="computedState.titleWeight"
      :title-itatic="computedState.titleItatic"
      :title-color="computedState.titleColor"
      :desc-size="computedState.descSize"
      :desc-weight="computedState.descWeight"
      :desc-itatic="computedState.descItatic"
      :desc-color="computedState.descColor"
    />

    <div
      class="transition-all duration-300"
      :style="{ width: computedState.width }"
    >
      <el-input
        v-if="computedState.type === 0"
        v-model="inputValue"
        :placeholder="computedState.desc"
        @click.stop
      />
      <el-input
        v-else-if="computedState.type === 1"
        :rows="5"
        type="textarea"
        v-model="inputValue"
        :placeholder="computedState.desc"
        @click.stop
      />
      <el-input
        type="number"
        v-else-if="computedState.type === 2"
        v-model="inputValue"
        :placeholder="computedState.desc"
        @click.stop
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IJsonSchemaStatusBase } from "@/types/editProps";
import MaterialsHeader from "@/components/SurveyComs/MaterialItems/Common/MaterialsHeader.vue";
import {
  getActiveCurrentStatus,
  getActiveCurrentStatusIndex,
  getTextStatus,
} from "@/utils/tools";
import type { CSSProperties } from "vue";

const props = defineProps<{
  serialNum: number;
  status: IJsonSchemaStatusBase;
}>();

const inputValue = ref<string>("");

const computedState = computed(() => ({
  title: getTextStatus(props.status.title)!,
  type: getActiveCurrentStatusIndex(props.status.inputType!),
  desc: getTextStatus(props.status.desc)!,
  width: getTextStatus(props.status.width!),
  position: getActiveCurrentStatus<"position">(props.status.position)!.value,
  titleSize: getActiveCurrentStatus<"titleSize">(props.status.titleSize)!,
  titleWeight: getActiveCurrentStatus<"titleWeight">(props.status.titleWeight)!
    .value,
  titleItatic: getActiveCurrentStatusIndex(props.status.titleItatic)!,
  titleColor: getTextStatus(props.status.titleColor)!,
  descSize: getActiveCurrentStatus<"descSize">(props.status.descSize)!,
  descWeight: getActiveCurrentStatus<"descWeight">(props.status.descWeight)!
    .value,
  descItatic: getActiveCurrentStatusIndex(props.status.descItatic)!,
  descColor: getTextStatus(props.status.descColor)!,
}));

defineOptions({
  meta: {
    title: "文本输入",
    __isRouteComponent: true,
    __parentPath: "/src/views/Materials/parts/TextInputPart.vue",
  },
});
</script>

<style scoped></style>
